<style src="@/css/components/table.css"></style>
<style src="@/css/components/button.css"></style>
<style src="@/css/components/el-dialog.css"></style>
<style>
.role-info {
    background: #fff;
    padding: 30px;
}

.role-info .no-border {
    border:none;
}

.test-papers-header {
    display: flex;
    justify-content:flex-start;
    padding-bottom: 20px;
}

.pages {
    margin-top: 30px;
}

.el-icon-caret-top:before,.el-icon-caret-bottom:before {
    content: ""
}
</style>

<template>
    <section class="role-info">
        <div class="test-papers-header">
            <!-- @click="addMember" -->
            <el-button type="primary" class="showdow" @click="state = true" >添加成员</el-button>
        </div>

        <el-table :data="list" style="width: 100%" class="newTab first-table">
            <el-table-column prop="Username" label="姓名" min-width="25%"></el-table-column>
            <el-table-column prop="Aliasname" label="别名" min-width="25%"></el-table-column>
            <el-table-column prop="DepartmentName" label="所属组织" min-width="25%"></el-table-column>
            <el-table-column label="操作" min-width="25%">
                <template slot-scope="scope">
                    <span class="operate" @click="delMember(scope.row.ERID)">移除</span>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog
            title="添加成员"
            :visible.sync="dialogLittle.centerDialogVisible"
            width="460px"
            center
        >
            <el-select class="input-dialog" v-model="dialogLittle.employeeID" filterable placeholder="请输入员工姓名">
                <el-option
                        v-for="item in employeeSelectList"
                        :key="item.EmployeeID"
                        :label="item.Username"
                        :value="item.EmployeeID">
                </el-option>
            </el-select>
            <p class="word-dialog-tap">*可以根据员工姓名搜索</p>
            <span slot="footer" class="dialog-footer">
                <el-button class="dialog-btn-left" type="primary" @click="sureAddMember">保存</el-button>
                <el-button class="dialog-btn-right" @click="sureAddMember(1)">保存并继续添加</el-button>
            </span>
        </el-dialog>


        <!-- 弹窗区 -->
        <el-dialog
            title="提示"
            :visible.sync="deleteState"
            class="new-dialog"
            width="480px">
            <div class="cont">确定删除权限</div>
            <span slot="footer" class="dialog-footer">
                <el-button type="text no-border" @click="deleteState = false">取消</el-button>
                <el-button type="primary" class="add" @click="deleteFn">确 定</el-button>
            </span>
        </el-dialog>


        <!-- 分页区 -->
        <pageModel class="pages newPage" :total="total" :page="page" @changePageSize="getPageSize" @changePage="getPage"></pageModel>

        <selectUser :personnelState="state" @setUser="getUser" :recordSelectId="selectUserList"></selectUser>
    </section>

</template>

<script>

import qs from 'qs'
import selectUser from "components/selectUser.vue"
import pageModel from "components/pageModel.vue"

export default{
    data: function(){
        return {
            ERID:'',
            selectUserList:[], //总选中员工列表
            state:false, //培训人员弹窗状态
            deleteState:false,
            roleID:this.$route.query.roleID,
            roleName:this.$route.query.roleName,
            list:[],
            menuList:[],
            permissionList:[],
            pageSize: 10,
            total:0,
            page:1,
            employeeSelectList:[],
            headTabID:1,
            path:[
                {
                    'name':'设置',
                    'path':'/organization/dept-list'
                },
                {
                    'name':'角色管理',
                    'path':'/organization/role-list'
                },
                {
                    'name':'成员权限'
                }
            ],

            dialogLittle:{
                centerDialogVisible: false,
                employeeID:'',
            }
        }
    },
    mixins: [mixinMethods],
    components:{
        selectUser,
        pageModel
    },
    methods: {

        // 获取选中的员工
        getUser(arrId, value) {
            this.state = value

            if(!Array.isArray(arrId)) {
                this.$message.error('糟糕,出错了')
                return;
            }

            if(arrId.length <= 0) return;

            this.selectUserList = arrId

            this.sureAddMember()
        },


        getPowerList(){
            axios.post('/com/role/viewPermission', qs.stringify({
                roleID:this.roleID
            })).then( (res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.menuList = d.data.MenuList;
                    this.permissionList = d.data.PermissionList;
                }else {
                    this.$message.error(d.msg)
                }
            });
        },

        sureAddMember(){
            if(this.selectUserList.length <= 0) {
                return false;
            }

            axios.post('/com/role/addEmployeeRole', qs.stringify({
                employeeID: this.selectUserList.join(','),
                roleID:this.roleID
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.getList()
                    this.selectUserList = []
                    this.$message.success('添加成功')
                }else {
                    this.$message.error(d.msg)
                }
            })
        },

        delMember(ERID){
            this.ERID = ERID
            this.deleteState = true
        },

        deleteFn() {
            axios.post('/com/role/delEmployeeRole', qs.stringify({
                ERID:this.ERID
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.getList();
                    this.$message.success('删除成功')
                }else {
                    this.$message.error(d.msg)
                }
            })
        },

        // 当前显示条数发生改变
        getPageSize(value) {
            this.pageSize = value
            this.getList()
        },

        // 当前分页改变
        getPage(value) {
            this.page = value
            this.getList()
        },

        getList(){
            axios.post('/com/role/employeeList', qs.stringify({
                roleID:this.roleID,
                pagesize:this.pageSize,
                page:this.page
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.list = d.data.Row
                    this.total = Number(d.data.Total)
                    console.log(this.total)
                }else {
                    this.$message.error(d.msg)
                }
            })
        }
    },
    mounted: function(){
        this.$store.commit('setPath', this.path)
        this.getList();
        this.getPowerList()
        axios.post('/com/employee/getEmployeeList', qs.stringify({
        })).then( (res) => {
            var d = res.data;
            if(d.flag == 1){
                this.employeeSelectList = d.data.Row;
            }else {
                this.$message.error(d.msg)
            }
        });
    }
}


</script>
